<template>
  <div class="container">
    <template v-if="loginUserInfo.roleName==='待审核医药机构用户' || loginUserInfo.roleName==='待审核企业用户'">
      <WaitAudit></WaitAudit>
    </template>
    <template v-else>
      <el-col :lg="12" :xs="24">
        <div class="header">
          <div class="title">通知中心</div>
        </div>
        <el-row>
          <basic-container>
            <avue-crud
              :data="noticeList"
              :option="option1"
            >
<!--              <template slot-scope="scope" slot="menu">
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-download"
                  class="none-border"
                  @click.stop="handleEdit(scope.row, scope.index)"
                  >下载附件
                </el-button>
              </template>-->
            </avue-crud>
          </basic-container>
        </el-row>
      </el-col>
      <el-col :lg="12" :xs="24">
          <div class="header">
        <div class="title">模板下载中心</div>
      </div>
        <el-row>
          <basic-container>
            <avue-crud :option="option2" :data="templateList">
              <template #url="{row}">
                <el-button type="text" @click="downloadTemplate(row)" :disabled="!row.url"><i class="el-icon-download" style="font-size: 20px"></i></el-button>
              </template>
            </avue-crud>
          </basic-container>
        </el-row>
      </el-col>
    </template>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import WaitAudit from "@/components/wel/waitAudit";
import { getList } from "@/api/desk/notice"
import {exportBlob} from "@/api/common";
import {downloadXls} from "@/util/util";
import {dateNow} from "@/util/date";
import {getToken} from '@/util/auth';

export default {
  name: "wel",
  components: {WaitAudit},
  data() {
    return {
      noticeList: [],
      templateList: [
        { name: '药品采购上报模板', url: '/api/purchase/export-template' },
        { name: '短缺药品申报模板', url: '/api/blade-shortageItem/shortageItem/export-template' },
        { name: '线下采购申请模板', url: '/api/blade-offlinePurchase/offlinePurchase/export-template' },
        { name: '集采新增固定模板', url: '/api/medpurBatch/download', templateName: '集采新增固定模板' },
        { name: '药品结余留用基数填报模板', url: '' },
        { name: '器械结余留用基数填报模板', url: '' },
      ],
      option1: {
        tip: false,
        searchShow: false,
        border: false,
        index: false,
        addBtn: false,
        refreshBtn: false,
        searchShowBtn: false,
        columnBtn: false,
        selection: false,
        editBtn: false,
        delBtn: false,
        tree: true,
        viewBtn: true,
        column: [
          {
            label: "发布人",
            prop: "createUserName",
            span: 24,
          },
          {
            label: "标题",
            prop: "title",
            span: 24,
            width: 200,
          },
          {
            label: "内容",
            prop: "content",
            hide: true,
            span: 24,
          },
          {
            label: "发布时间",
            prop: "createTime",
            type: "date",
            valueFormat: "yyyy-MM-dd",
            format: "yyyy-MM-dd",
            span: 24,
          },
        ],
      },
      option2: {
        tip: false,
        searchShow: false,
        border: false,
        index: false,
        addBtn: false,
        refreshBtn: false,
        searchShowBtn: false,
        columnBtn: false,
        selection: false,
        tree: true,
        menu: false,
        column: [
          {
            label: "模板名称",
            prop: "name",
            align: "left",
            width: 350,
          },
          {
            label: "下载",
            prop: "url",
            headerAlign: "right",
            align: "right",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo", "loginUserInfo"]),
  },
  // mounted(){
  //      window.addEventListener('resize', function(){
  //     let screenWidth  = document.body.clientWidth;
  //     console.log(screenWidth,"6666")
  //   })
  // },
  methods: {
    downloadTemplate({ url, name, templateName }) {
      if (!url) {
        this.$message.info("模板暂未提供");
        return
      }
      exportBlob(`${url}?${this.website.tokenHeader}=${getToken()}&templateName=${templateName || name}.xlsx`).then(res => {
        downloadXls(res.data, `${name}.xlsx`);
      })
    },
    async loadNotice () {
      const { data } = await getList(1, 20, {})
      console.log('loadNotice', data)
      if (data.success) {
        this.noticeList = data.data.records
      }
    },
  },
  mounted () {
    this.loadNotice()
  }
};
</script>

<style lang="scss" scoped>
.container {
  width:100%;
  //height: 100%;
  background: white;
}
// @media screen and (min-width: 1500px)  {
//   .container{
//     width:100%;
//   }
//   .title{
//     width:50%;
//   }
// }
// @media screen and (min-width: 1200px) and (max-width:1500px) {
//   .container{
//     width:1700px;
//   }
//   .title{
//     width:850px;
//   }
// }

// @media screen and (min-width: 0px) and (max-width:1200px) {
//   .container{
//      width:1400px;
//   }
//    .title{
//      width:700px;
//   }
// }

// /* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
// @media screen and (min-width: 768px) and (max-width:992px) {
//   .container{
//     width:1400px;
//   }
//    .title{
//      width:700px;
//   }
// }
.title {
  padding-left: 32px;
  line-height: 70px;
  box-sizing: border-box;
}
.header {
  color: #909399;
  font-weight: 800;
  font-size: 20px;
}
::v-deep .avue-crud__menu {
  height: 0px !important;
  display: none;
}
.el-font-size {
  font-size: 14px;
}
</style>
